<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类别页面</title>
    <link href="layui/css/layui.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>

<div class="layui-form-item">
    <form class="layui-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">类别名</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="cname" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
    <button class="layui-btn" lay-submit lay-filter="addfm">添加</button>
    </form>

</div>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="toolEventDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<!--添加div开始-->
<div style="display:none" id="addcatediv">
    <form class="layui-form" id="fmadd" onsubmit="return false;">
        <div class="layui-form-item">
            <label class="layui-form-label">类型名</label>
            <div class="layui-input-inline">
                <input type="text" name="cname" required  lay-verify="required" placeholder="请输入类型名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn"  lay-submit lay-filter="AddBtn">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--添加div结束-->
<!--修改div开始-->
<div style="display:none" id="updatecatediv">
    <form class="layui-form" id="fmudate" lay-filter="fmudate" onsubmit="return false;">
        <input type="hidden" name="cid">
        <div class="layui-form-item">
            <label class="layui-form-label">类型名</label>
            <div class="layui-input-inline">
                <input type="text" name="cname" required  lay-verify="required" placeholder="请输入类型名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn"  lay-submit lay-filter="UpdateBtn">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table,
        form = layui.form;

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 400
            ,url: '../CategoryServlet?reqName=getCates' //数据接口
            ,page: true //开启分页
            ,method: "post"
            ,cols: [[ //表头
                {checkbox:true},
                {field: 'cid', title: 'ID', width:80}
                ,{field: 'cname', title: '类别名', width:80}
                ,{title: '操作', width: 200, templet: '#toolEventDemo'}

            ]],
            id:"cateTable"
        });
        form.on('submit(search)', function(data){
            table.reload('cateTable', {
                where:data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(addfm)', function(data){
            layer.open({
                type: 1,
                title: '添加类别',
                area: ['400px', '300px'],
                content: $("#addcatediv"),
                maxmin: true
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        form.on('submit(AddBtn)', function(data){
            $.post("../CategoryServlet?reqName=addCates",data.field,function (res){
                if(res.code == 0){
                    layer.msg("添加成功",{icon:1,time:2000},function (res){
                        table.reload('cateTable');
                        layer.closeAll();
                    });
                }else{
                    layer.msg(res.msg)
                }
            },"json");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //单元格工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            if(layEvent === 'del'){ //删除
                layer.confirm('确定删除吗？', function(index){

                });
            } else if(layEvent === 'edit'){ //编辑
                form.val("fmudate",data);
                layer.open({
                    type: 1,
                    title: '修改类别',
                    area: ['400px', '300px'],
                    content: $("#updatecatediv"),
                    maxmin: true
                });
            }
        });
        form.on('submit(UpdateBtn)', function(data){
            $.post("../CategoryServlet?reqName=updateCates",data.field,function (res){
                if(res.code == 0){
                    layer.msg("修改成功",{icon:1,time:2000},function (res){
                        table.reload('cateTable');
                        layer.closeAll();
                    });
                }else{
                    layer.msg(res.msg)
                }
            },"json");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</html>